<template>
  <div class="order-pay-success">
    <c-title :text="order_status_name"></c-title>
    <div :class="order_status==0?'head-no':'head'">
      <div class="round">
        <i :class="order_status==0?'iconfont icon-dengdai1':order_status==-1?'iconfont icon-guanbi':'iconfont icon-record_go'"></i>
      </div>
      <p class="tips">{{order_status_name}}</p>
    </div>

    <van-swipe :class="order_status==0?'swiperBanner2':'swiperBanner1'" :show-indicators="false" @change="change_order" :loop="false" :touchable="touchable">
      <van-swipe-item v-for="(item, index) in list" :key="index">
        <div class="section">
          <div class="button-group" v-if="item.head&&item.head.length!==0">
            <button class="btn" v-for="(btn_item,btn_index) in item.head" @click="banner_link(btn_item.h5_link)" :key="btn_index">{{ btn_item.name
            }}</button>
          </div>
          <div class="orders-tips" v-if="list && list.length !== 1">· 左右滑动切换订单信息 ·</div>
          <div v-if="order_status==0" class="no-pay">
            <i class="iconfont icon-a-beizhu2"></i>
            <span class="no-pay-tips">使用第三方支付时可能会出现支付后状态还未同步，导致显示未支付，请过几分钟再刷新查看状态</span>
            <span class="reset" @click="getData">刷新</span>
          </div>
          <div class="order-detail" v-if="!Array.isArray(item.order_info)">
            <div class="between">
              <span>订单编号</span>
              <span>{{ item.order_info.order_sn }}</span>
            </div>
            <div class="between pay-amount">
              <span>支付金额</span>
              <span>￥{{ item.order_info.price }}</span>
            </div>
            <div class="between">
              <span>支付方式</span>
              <span>{{ item.order_info.pay_type_name }}</span>
            </div>

            <div v-if="item.order_info.page_type == 'live-install' || item.order_info.page_type == 'store-reserve'"
              :class="item.order_info.page_type == 'live-install' ? 'home-installation' : 'appointment-date'">
              预约日期：{{ item.order_info.page_type == 'live-install' ? item.order_info.reserve_time
                : item.order_info.pre_book_date }}</div>



            <!-- 自提点核销、门店核销、门店自提点核销、门店预约、分时预约start-->
            <div
              v-if="item.order_info.page_type == 'package-deliver' || item.order_info.page_type == 'reserve-simple' || item.order_info.page_type == 'store-reserve' || (item.order_info.page_type == 'store-cashier' && item.order_info.is_qr_code !== 0)"
              class="self-pick-up-site" :class="{ 'mt-38': item.order_info.page_type == 'store-reserve' }">



              <div class="self-pick-up-site-info"
                v-if="item.order_info.page_type == 'package-deliver' || (item.order_info.page_type == 'store-cashier' && item.order_info.is_qr_code !== 0)">
                <div class="flex-center"
                  v-if="item.order_info.page_type == 'package-deliver' || (item.order_info.page_type == 'store-cashier' && item.order_info.is_qr_code == 12)">
                  <!--门店自提点核销-->
                  <i class="iconfont icon-zx_map_locate1"></i>
                  <span class="self-pick-up-site-name">{{ item.order_info.deliver.deliver_name }}</span>
                  <span class="mobile">{{ item.order_info.deliver.deliver_mobile }}</span>
                </div>
                <div class="between"
                  v-if="item.order_info.page_type == 'store-cashier' && item.order_info.is_qr_code == 2"> <!--门店核销-->
                  <div>
                    <i class="iconfont icon-dianpu1"></i>
                    <span class="self-pick-up-site-name">{{ item.order_info.store.name }}</span>
                  </div>
                  <div class="into-store" @click="sotre_handle(item.order_info)"><span>进店逛逛</span><i
                      class="iconfont icon-icon_more11"></i></div>
                </div>
                <!-- 地址 -->
                <div class="addresss"
                  v-if="item.order_info.page_type == 'package-deliver' || item.order_info.page_type == 'store-cashier'">
                  <template v-if="item.order_info.page_type == 'store-cashier' && item.order_info.is_qr_code == 2">{{
                    item.order_info.store.full_address }}</template>
                  <template v-else>{{ item.order_info.deliver.full_address }}</template>

                </div>
                <div class="flex-center">
                  <a class="flex-center mr-28"
                    :href="`tel:` + (item.order_info.page_type == 'store-cashier' && item.order_info.is_qr_code == 2 ? item.order_info.store.mobile : item.order_info.deliver.deliver_mobile)"
                    v-if="item.order_info.page_type == 'package-deliver' || item.order_info.page_type == 'store-cashier'">
                    <div class="iconfont-round">
                      <i class="iconfont icon-dianhua1"></i>
                    </div>
                    <span class="c-6E6E79 fz-24">致电</span>
                  </a>
                  <div class="flex-center mr-28"
                    v-if="item.order_info.page_type == 'store-cashier' && item.order_info.is_qr_code == 2"
                    @click="show_kefu(item.order_info)">
                    <div class="iconfont-round">
                      <i class="iconfont icon-linedesign-20"></i>
                    </div>
                    <span class="c-6E6E79 fz-24">客服</span>
                  </div>
                  <div class="flex-center"
                    v-if="item.order_info.page_type == 'package-deliver' || item.order_info.page_type == 'store-cashier'"
                    @click.stop="navigation_1(format_lat_lng(item.order_info))">
                    <div class="iconfont-round">
                      <i class="iconfont icon-fontclass-tuiguang1"></i>
                    </div>
                    <span class="c-6E6E79 fz-24">导航</span>
                  </div>
                </div>
              </div>
              <!-- 分时预约 -->
              <div class="appointment" v-if="item.order_info.page_type == 'reserve-simple'">
                <p>服务：{{ item.order_info.goods_title }}</p>
                <p>预约人员：{{ item.order_info.customer_name }}</p>
                <p>预约日期：{{ item.order_info.begin_time }}</p>
              </div>
              <template
                v-if="(item.order_info.page_type == 'store-cashier' && item.order_info.is_qr_code !== 0) || item.order_info.page_type == 'package-deliver' || item.order_info.page_type == 'store-reserve' || item.order_info.page_type == 'reserve-simple'">
                <template v-if="order_status >=1 && item.order_info.qr_code_url">
                  <img class="qrcode" :src="item.order_info.qr_code_url" />
                  <div class="self-pick-up-site-tips">
                    <template
                      v-if="item.order_info.page_type == 'package-deliver' || item.order_info.page_type == 'reserve-simple'">请核销员扫码，可先截图保存！</template>
                    <template v-else>请店长或核销员扫码，可先截图保存！</template>
                  </div>
                </template>
              </template>
            </div>
            <!-- 自提点核销、门店核销、门店自提点核销、门店预约、分时预约end-->

            <!-- 酒店房间信息 -->
            <div class="hotel" v-if="item.order_info.page_type == 'hotel' && item.order_info.is_cashier == 0">
              <div class="hotel-head">
                <img class="hotel-photo" :src="item.order_info.order_goods.thumb" />
                <div class="hotel-head-right">
                  <p class="hotel-title">{{ item.order_info.order_goods.title }}</p>
                </div>
              </div>
              <div class="hotel-foot">
                <div class="text-left">
                  <p class="c-989898 fz-26">入住人</p>
                  <p class="fz-28 mt-5 fw-500">{{ item.order_info.realname }}</p>
                </div>
                <div class="text-left">
                  <p class="c-989898 fz-26">联系手机</p>
                  <p class="fz-28 mt-5 fw-500">{{ item.order_info.mobile }}</p>
                </div>
                <div class="text-left">
                  <p class="c-989898 fz-26">入住如期</p>
                  <p class="fz-28 mt-5 fw-500">{{ item.order_info.enter_at.split(' ')[0] }}</p>
                </div>
                <div class="text-left">
                  <p class="c-989898 fz-26">离店日期</p>
                  <p class="fz-28 mt-5 fw-500">{{ item.order_info.leave_at.split(' ')[0] }}</p>
                </div>
              </div>
            </div>

            <!-- 课程  -->
            <div class="course" v-if="item.order_info.page_type == 'video-demand'">
              <div class="course-left">
                <p class="course-title">{{ item.order_info.order_goods.title }}</p>
                <div class="flex-center">
                  <img class="course-teach-img" :src="item.order_info.order_goods.thumb" alt="" />
                  <span class="course-teach-name">{{ item.order_info.order_goods.lecturer_name }}</span>
                </div>
              </div>
              <div class="course-right" @click="goto('course', item.order_info.order_goods)">
                <p class="course-periods">共{{ item.order_info.order_goods.course_chapter_num }}章</p>
                <p class="course-detail">课程详情 <i class="iconfont icon-icon_more11"></i> </p>
              </div>
            </div>

            <!-- 拼团  -->
            <div class="group-booking" v-if="item.order_info.page_type == 'fight-groups'">
              <div class="group-booking-time"
                v-if="item.order_info.offered_members.length < item.order_info.team_people_num"><span>距离结束</span><span
                  style="color:var(--themeBaseColor);">{{ new
                    Date(formatTime(item.order_info.end_time)).getDate() - new Date().getDate() }}</span><span
                  style="margin-right: 0.2188rem;">天</span><van-count-down
                  :time="fun.getTimeDifference(new Date(formatTime(item.order_info.end_time)))">
                  <template #default="timeData">
                    <span class="group-booking-block">{{ timeData.hours < 10 ? '0' + timeData.hours : timeData.hours}}</span>
                    <span class="group-booking-colon">:</span>
                    <span class="group-booking-block">{{ timeData.minutes < 10 ? '0' + timeData.minutes : timeData.minutes
                    }}</span>
                        <span class="group-booking-colon">:</span>
                        <span class="group-booking-block">{{ timeData.seconds < 10 ? '0' + timeData.seconds : timeData.seconds }}</span>
                  </template>
                </van-count-down>
              </div>
              <div class="group-booking-center">
                <div class="group-booking-team"
                  v-for="(team_member_item, team_member_index) in item.order_info.offered_members"
                  :key="team_member_index">
                  <div class="img">
                    <img :src="team_member_item.avatar_image" />
                  </div>
                  <span class="group-booking-head" v-if="team_member_item.is_leader == 1">团长</span>
                </div>
                <div class="group-booking-team" v-for="(ie, team_member_index) in item.order_info.team_people_num -
                  item.order_info.offered_members.length > 0 ? item.order_info.team_people_num -
                item.order_info.offered_members.length : 0" :key="team_member_index">
                  <div class="img">
                    <img src="">
                  </div>
                  <i class="iconfont icon-group_wenhao"></i>
                </div>
              </div>
              <p v-if="item.order_info.offered_members.length < item.order_info.team_people_num">拼团中，离成团还差<span
                  style="color:#F15353">{{ item.order_info.team_people_num -
                    item.order_info.offered_members.length }}</span>人</p>
              <div>
                <button v-if="item.order_info.offered_members.length < item.order_info.team_people_num"
                  class="group-booking-btn" @click="shareWeixin(item.order_info)">邀请好友</button>
                <button v-else class="group-booking-btn" @click="group_open(item.order_info)">我要开团</button>
              </div>
            </div>
          </div>



          <!-- 酒店信息 -->
          <div v-if="item.order_info.page_type == 'hotel' && item.order_info.show_hotel == 1" class="hotel-info">
            <div class="hotel-box">
              <div class="between">
                <div>
                  <i class="iconfont icon-dianpu1"></i>
                  <span class="self-pick-up-site-name">{{ item.order_info.hotel.name }}</span>
                </div>
                <div class="into-store" @click="goto('hotel', item.order_info.hotel)"><span>进店逛逛</span><i
                    class="iconfont icon-icon_more11"></i></div>
              </div>
              <div class="addresss">{{ item.order_info.hotel.full_address }} </div>
              <div class="flex-center">
                <a class="flex-center mr-28" :href="`tel:` + item.order_info.hotel.mobile">

                  <div class="iconfont-round">
                  <i class="iconfont icon-dianhua1"></i>
                  </div>
                  <span class="c-6E6E79 fz-24">致电</span>
                </a>
                <div class="flex-center mr-28" @click="show_kefu(item.order_info)">

                  <div class="iconfont-round">
                  <i class="iconfont icon-linedesign-20"></i>
                </div>
                  <span class="c-6E6E79 fz-24">客服</span>
                </div>
                <div class="flex-center"
                  @click.stop="navigation(item.order_info.hotel.latitude, item.order_info.hotel.longitude, item.order_info.hotel.full_address)">
                  <div class="iconfont-round">
                  <i class="iconfont icon-fontclass-tuiguang1"></i>
                  </div>
                  <span class="c-6E6E79 fz-24">导航</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 上门安装 -->
          <div v-if="item.order_info.page_type == 'live-install'" class="hotel-info">
            <div class="hotel-box">
              <div class="between">
                <div>
                  <i class="iconfont icon-dianpu1"></i>
                  <span class="self-pick-up-site-name">{{ item.order_info.store.name }}</span>
                </div>
                <div class="into-store" @click="sotre_handle(item.order_info)"><span>进店逛逛</span><i
                    class="iconfont icon-icon_more11"></i></div>
              </div>
              <div class="addresss">{{ item.order_info.store.full_address }} </div>
              <div class="flex-center">
                <a class="flex-center mr-28" :href="`tel:` + item.order_info.store.mobile">
                   <div class="iconfont-round">
                  <i class="iconfont icon-dianhua1"></i>
                  </div>
                  <span class="c-6E6E79 fz-24">致电</span>
                </a>
                <div class="flex-center mr-28" @click="show_kefu(item.order_info)">
                  <div class="iconfont-round">
                  <i class="iconfont icon-linedesign-20"></i>
                  </div>
                  <span class="c-6E6E79 fz-24">客服</span>
                </div>
                <div class="flex-center"
                  @click.stop="navigation(item.order_info.store.latitude, item.order_info.store.longitude, item.order_info.store.full_address)">
                  <div class="iconfont-round">
                  <i class="iconfont icon-fontclass-tuiguang1"></i>
                  </div>
                  <span class="c-6E6E79 fz-24">导航</span>
                </div>
              </div>
            </div>
          </div>

          <!--门店自提点核销/门店快递 收银台-->
          <div class="store-cancle-box"
            v-if="item.order_info.page_type == 'store-reserve' || (item.order_info.page_type == 'store-cashier' && (item.order_info.is_qr_code == 0 || item.order_info.is_qr_code == 12) && item.order_info.show_store == 1)">
            <div class="store-cancle">
              <div class="between">
                <div class="flex-center">
                  <i class="iconfont icon-dianpu1"></i>
                  <span class="store-cancle-name">{{ item.order_info.store.name }}</span>
                </div>
                <div class="into-store" @click="sotre_handle(item.order_info)"><span>进店逛逛</span><i
                    class="iconfont icon-icon_more11"></i></div>
              </div>
              <div class="addresss">{{ item.order_info.store.full_address }}</div>
              <div class="flex-center">
                <a class="flex-center mr-28" :href="`tel:` + item.order_info.store.mobile">
                  <div class="iconfont-round">
                  <i class="iconfont icon-dianhua1"></i>
                  </div>
                  <span class="c-6E6E79 fz-24">致电</span>
                </a>
                <div class="flex-center mr-28" @click="show_kefu(item.order_info)">
                  <div class="iconfont-round">
                  <i class="iconfont icon-linedesign-20"></i>
                  </div>
                  <span class="c-6E6E79 fz-24">客服</span>
                </div>
                <div class="flex-center"
                  @click.stop="navigation(item.order_info.store.latitude, item.order_info.store.longitude, item.order_info.store.full_address)">
                  <div class="iconfont-round">
                  <i class="iconfont icon-fontclass-tuiguang1"></i>
                  </div>
                  <span class="c-6E6E79 fz-24">导航</span>
                </div>
              </div>


            </div>

          </div>

          <!-- 拼团团长奖励 -->
          <div class="award"
            v-if="item.order_info.page_type == 'fight-groups' && item.order_info.show_team_head_reward == 1"
            style="margin:0.625rem 0;">
            <p class="award-tips">拼团成功团长获得</p>
            <template v-for="team_item in item.order_info.team_head_reward">
              <div class="between mb-40"  v-if="team_item.code !== 'coupon'">
                <div class="align-items-center">
                  <img class="award-img"
                    :src="'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/pay_success/' + team_item.icon" />
                  <div class="text-left fz-28 bold"><span class="amount-price">+{{ team_item.amount }}</span>{{
                    team_item.title }}</div>
                </div>
                <button class="award-btn" @click="shareWeixin(item.order_info)">邀请好友</button>
              </div>


              <div style="position: relative;" v-if="team_item.code == 'coupon'"  @touchmove="handle_mousewheel" @touchend="touchable = true">
                <div class="award-bottom">
                  <div style="display: flex;flex-wrap: nowrap;">
                    <div class="award-bottom-item" v-for="(coupon_item, coupon_index) in team_item.data"
                      :key="coupon_item.id" :class="team_item.data.length > 2 ? 'mr-111' : 'mr-167'">
                      <div class="face-value">￥{{ coupon_item.value }}</div>
                      <p class="full-condition">{{ coupon_item.title }}</p>

                      <div class="award-line" :class="{ 'r-20': team_item.data.length <= 2 }"
                        v-if="coupon_index + 1 !== team_item.data.length"></div>
                    </div>
                  </div>
                </div>
                <button class="award-button" @click="goto('coupon')">去我的优惠券</button>
              </div>


            </template>

          </div>

          <!-- 支付奖励 -->
          <div class="award" style="margin: 0.625rem 0;" v-if="item.reward_list && item.reward_list.length !== 0">
            <p class="award-tips" style="display: flex;align-items: center;">
              <span>本次支付预计获得</span> <span @click="tips_handle" class="award-tips-round">!</span>
            </p>
            <template v-for="reward_item in item.reward_list">
              <div class="between mb-40" v-if="reward_item.code !== 'coupon'">
                <div class="align-items-center">
                  <img class="award-img"
                    :src="'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/pay_success/' + reward_item.icon" />
                  <div class="text-left">
                    <p v-if="reward_item.code == 'share_coupon'" class="fz-28 bold">获得<span class="amount-price">{{
                      reward_item.amount }}</span>个{{ reward_item.title
  }}</p>
                    <p v-else class="fz-28 bold"><span class="amount-price">+{{ reward_item.amount }}</span>{{
                      reward_item.title
                    }}</p>
                    <p class="c-989898 fz-24">{{ reward_item.desc }}</p>
                  </div>
                </div>
                <button v-if="reward_item.code == 'share_coupon'" class="award-btn"
                  @click="goto(reward_item.url, item.public_param)">去分享</button>
                <button v-else-if="reward_item.is_after_pay == 1" class="award-btn"
                  @click="goto(reward_item.url, reward_item)">去查看</button>
              </div>

              <div style="position: relative;" v-if="reward_item.code == 'coupon'">
                <div class="award-bottom" @touchmove="handle_mousewheel" @touchend="touchable = true">
                  <div style="display: flex;flex-wrap: nowrap;" :style="reward_item.data.length==1?'justify-content:center':''">
                    <div class="award-bottom-item" v-for="(c_item, c_index) in reward_item.data"
                      :class="reward_item.data.length > 2 ? 'mr-111' : 'mr-167'">
                      <div class="face-value" v-if="c_item.coupon_method==1">￥{{ (c_item.value + '').split('.')[0] }}</div>
                      <div class="face-value" v-else>{{ (c_item.value + '').split('.')[0] }}折</div>
                      <p class="full-condition">{{ c_item.title }}</p>
                      <div class="award-line" :class="{ 'r-20': reward_item.data.length <= 2 }"
                        v-if="c_index + 1 !== reward_item.data.length"></div>
                    </div>
                  </div>
                </div>
                <div class="award-button" @click="goto('coupon')">去我的优惠券</div>

              </div>



            </template>

          </div>

          <div class="banner" v-if="item.carousel && item.carousel.length !== 0">
            <van-swipe class="my-swipe" :autoplay="3000" :show-indicators="false">
              <van-swipe-item v-for="(carousel_item, i) in item.carousel" :key="i"> <img :src="carousel_item.pic_url"
                  @click="banner_link(carousel_item.h5_link)" /></van-swipe-item>
            </van-swipe>
          </div>
          <div class="goods" v-if="item.goods.data && item.goods.data.length !== 0">
            <p class="title">推荐商品</p>
            <div class="goodx-box">
              <div class="goods-item" @click="goto('goods', goods_item)" v-for="goods_item in item.goods.data"
                :key="goods_item.id">
                <img :src="goods_item.thumb" />
                <div class="goods-title">{{ goods_item.title }}</div>
                <div class="goods-price">￥{{ goods_item.price }}</div>
              </div>
            </div>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
    <van-popup v-model="lotteryVisible" :close-on-click-overlay="false">
      <div class="close-icon">
        <!-- <img :src="popupCloseIcon"  /> -->
        <van-icon name="close" size="40px" color="#999" @click="lotteryVisible = false" />
      </div>
      <div class="prize-result">
        <img :src="lotteryPopupBg" class="popup-bg" />
        <div class="result-text">
          <div class="title">支付成功</div>
          <!-- <div class="sub-title">{{ lotteryIntegral }}积分</div> -->
        </div>
        <div class="confirm-button">
          <van-button round block color="linear-gradient(to bottom, #F6F3BE, #FFC770)" @click="goLottery">去抽奖</van-button>
        </div>
      </div>
    </van-popup>





    <yz-service v-model="showKefu" :url='cservice' :mobile='service_mobile' :qr="service_QRcode"></yz-service>
  </div>
</template>

<script>
import index_controller from "./index_controller";
export default index_controller;
</script>

<style scoped lang="scss">
::v-deep .van-nav-bar .van-icon {
  color: #fff;
}

::v-deep .van-nav-bar {
  background: var(--themeBaseColor);
  border-bottom: var(--themeBaseColor);
}

.order-pay-success ::v-deep .van-button__content {
  background-color: var(--themeBaseColor) !important;
  color: #00001C;
}

::v-deep .van-nav-bar__title {
  color: #fff;
}

.order-pay-success {
  .amount-price {
    color: #F15353;
  }

  .hotel-info {
    margin-top: 0.625rem;
    background: #FFFFFF;
    border-radius: 0.5rem;
    padding: 0.75rem;
  }

  .hotel-box {
    position: relative;
    padding: 0.875rem 0.75rem 0.625rem;
    border-radius: 0.4375rem;
    z-index: 2;
    overflow: hidden;

    .store-cancle-name {
      font-size: 0.9375rem;
      font-weight: bold;
      color: #00001C;
      margin-left: 0.3125rem;
    }

    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: -1;
      background: var(--themeBaseColor);
      opacity: 0.04;
    }
  }

  .section {
    margin: 0 0.75rem;
  }
  .swiperBanner2{
    overflow: hidden;
    margin: -9.25rem 0 0;

  }
  .swiperBanner1 {
    overflow: hidden;
    margin: -6.25rem 0 0;
  }

  .group-booking-colon {
    display: inline-block;
    margin: 0 0.1875rem;
    color: var(--themeBaseColor);
  }

  .group-booking-center {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.9375rem;
    margin-bottom: 0.9375rem;
  }

  .group-booking-box {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    background: #F5F5F5;
    border: 2px dotted #D6D6DC;
    border-radius: 3.125rem;
    overflow: hidden;


  }

  .group-booking-team {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    background: #F5F5F5;
    margin-right: 1.25rem;
    border-radius: 3.125rem;

    .img {
      width: 3rem;
      height: 3rem;
      background: #fafafa;
      border-radius: 2rem;
      border: dashed 0.0625rem #ebebeb;
      overflow: hidden;
      display: flex;

      img {
        width: 100%;
      }
    }

    .iconfont {
      width: 3rem;
      height: 3rem;
      font-size: 1.5rem;
      color: #ebebeb;
      position: absolute;
      line-height: 3rem;
      top: 0;
      left: 0;
    }


  }

  .group-booking-btn {
    margin-top: 1.25rem;
    background: var(--themeBaseColor);
    width: 15.625rem;
    height: 2.5rem;
    line-height: 2.5rem;
    border-radius: 1.875rem;
    border: none;
    color: #fff;
    font-size: 0.9375rem;
  }

  .group-booking-head {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    white-space: nowrap;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #FFFFFF;
    background: var(--themeBaseColor);
    border-radius: 0.5938rem;
    padding: 0.1563rem 0.3125rem;
    box-sizing: border-box;
  }

  .group-booking-box::after {
    content: "?";
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    color: #AAAAB3;
  }

  .group-booking-block {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.3125rem;
    color: #fff;
    font-size: 0.8125rem;
    text-align: center;
    background-color: var(--themeBaseColor);
  }

  .group-booking {
    border-top: 1px dotted #D6D6DC;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
  }

  .group-booking-time {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #00001C;
  }

  .appointment {
    border-top: 1px dotted #D6D6DC;
    color: var(--themeBaseColor);
    text-align: left;
    padding-top: 0.8125rem;
    margin-bottom: 1.25rem;
    font-size: 0.8125rem;
    font-weight: 400;
  }

  .home-installation {
    color: var(--themeBaseColor);
    padding-top: 0.8125rem;
    margin-top: 1.25rem;
    text-align: left;
    font-size: 0.8125rem;
    border-top: 1px dotted #D6D6DC;
  }

  .course-title {
    font-size: 0.875rem;
    color: #00001C;
    font-weight: 500;
    margin-bottom: 0.5938rem;
  }

  .course-teach-name {
    color: #6E6E79;
    margin-left: 0.1875rem;

  }

  .course-detail {
    font-size: 0.8125rem;
    font-weight: 400;
    color: #00001C;
  }

  .course-periods {
    margin-bottom: 0.8438rem;
    color: #6E6E79;
    font-size: 0.8125rem;
  }

  .course-right {
    text-align: right;
  }

  .course {
    margin-top: 1.25rem;
    background: #F5F5F5;
    border-radius: 0.5rem;
    padding: 0.75rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .course-teach-img {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    border-radius: 3.125rem;
  }

  .course-left {
    text-align: left;
  }

  .hotel-foot {
    margin-top: 0.9375rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    column-gap: 0.5rem;
    row-gap: 0.625rem;
  }

  .hotel {
    margin-top: 1.25rem;
    box-sizing: border-box;
  }

  .hotel-head {
    background: #F5F5F5;
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }

  .hotel-desc {
    color: #6E6E79;
    font-weight: 400;
    font-size: 0.875rem;
  }

  .hotel-title {
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 500;
    color: #00001C;
    margin-bottom: 0.6563rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .hotel-head-right {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-left: 0.5938rem;
  }

  .hotel-photo {
    width: 3.75rem;
    height: 3.75rem;
    background: #F0F0F1;
    border-radius: 0.5rem;
    margin: 0;
  }

  .mt-38 {
    margin-top: 1.1875rem !important;
  }

  .appointment-date {
    border-top: 1px dotted #D6D6DC;
    padding-top: 0.8125rem;
    margin-top: 0.8125rem;
    color: var(--themeBaseColor);
    text-align: left;
    font-size: 0.8125rem;
    margin-bottom: 1.25rem;
    box-sizing: border-box;
  }

  .store-cancle-box {
    background: #fff;
    padding: 0.75rem;
    border-radius: 0.4375rem;
    margin: 0.75rem 0;
  }

  .store-cancle {
    position: relative;
    padding: 0.875rem 0.75rem 0.625rem;
    border-radius: 0.4375rem;
    z-index: 2;
    overflow: hidden;

    .store-cancle-name {
      font-size: 0.9375rem;
      font-weight: bold;
      color: #00001C;
      margin-left: 0.3125rem;
    }

  }

  .store-cancle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    background: var(--themeBaseColor);
    opacity: 0.04;
  }

  .icon-icon_more11 {
    font-size: 0.7813rem;
  }

  .into-store {
    text-align: center;
    padding-left: 0.4063rem;
    padding-right: 0.1563rem;
    height: 1.25rem;
    line-height: 1.25rem;
    background: var(--themeBaseColor);
    border-radius: 1.875rem;
    color: #fff;
    font-size: 0.75rem;
  }

  .mr-28 {
    margin-right: 0.875rem;
  }

  .c-6E6E79 {
    color: #6E6E79;
  }

  .icon-zx_map_locate1,
  .icon-dianpu1 {
    color: var(--themeBaseColor);
  }
  .iconfont-round{
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 3.125rem;
    overflow: hidden;
  }
  .iconfont-round::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    background: var(--themeBaseColor);
    opacity: .1;
  }

  .icon-dianhua1,
  .icon-linedesign-20,
  .icon-fontclass-tuiguang1 {
    position: relative;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 0.875rem;
    border-radius: 3.125rem;
    margin-right: 0.1875rem;
    color: var(--themeBaseColor);
    // font-weight: bold;
    overflow: hidden;

  }

  // .icon-dianhua1::after,
  // .icon-linedesign-20::after,
  // .icon-fontclass-tuiguang1::after {
  //   content: "";
  //   position: absolute;
  //   left: 0;
  //   right: 0;
  //   top: 0;
  //   bottom: 0;
  //   z-index: -1;
  //   background: var(--themeBaseColor);
  //   opacity: .1;
  // }


  .flex-center {
    display: flex;
    align-items: center;
  }

  .self-pick-up-site-name {
    font-size: 0.9375rem;
    font-weight: bold;
    color: #00001C;
    margin: 0 0.3125rem;
  }

  .self-pick-up-site {
    margin-top: 1.25rem;

    .self-pick-up-site-tips {
      font-size: 0.75rem;
      font-weight: 400;
      color: #3B3B4A;
    }

    .qrcode {
      width: 7.5rem;
      height: 7.5rem;
      margin: 0 auto 0.9375rem;
    }

    .mobile {
      font-size: 0.9375rem;
      font-weight: 400;
      color: #00001C;
    }

    .self-pick-up-site-name {
      font-size: 0.9375rem;
      font-weight: bold;
      color: #00001C;
      margin: 0 0.3125rem;
    }

    .self-pick-up-site-info {
      position: relative;
      padding: 0.875rem 0.75rem 0.625rem;
      // background: rgba(255, 248, 248, 1);
      border-radius: 0.4375rem;
      overflow: hidden;
      margin-bottom: 0.875rem;
      z-index: 2;
    }

    .self-pick-up-site-info::after {
      content: "";
      position: absolute;
      z-index: -1;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: var(--themeBaseColor);
      opacity: .04;
    }

  }

  .addresss {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 400;
    color: #6E6E79;
    margin-top: 0.4375rem;
    margin-bottom: 0.5625rem;
  }

  .goods-price {
    height: 0.9375rem;
    line-height: 0.9375rem;
    color: #FF464C;
    font-size: 0.9375rem;
    font-weight: bold;
    text-align: left;
    margin-left: 0.5rem;
    margin-bottom: 0.8438rem;
  }

  .goods-title {
    font-size: 0.8125rem;
    color: #2C2C2C;
    text-align: left;
    padding: 0.625rem 0.5rem;
  }

  .goodx-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0.5rem;
    row-gap: 0.625rem;
    padding-bottom: .5rem;
  }

  .goods-item {
    overflow: hidden;
    border-radius: 0.5rem;
    background: #fff;
    position: relative;

    img {
      margin: 0;
      width: 10.7188rem;
      height: 10.7188rem;
    }
  }

  .goods {
    margin: 1.3125rem 0;

    .title {
      position: relative;
      text-align: center;
      margin-bottom: 0.9375rem;
    }

    .title::after {
      content: "";
      position: absolute;
      left: 25%;
      top: 50%;
      width: 2.5938rem;
      height: 1px;
      background: #D6D6DC;
    }

    .title::before {
      content: "";
      position: absolute;
      right: 25%;
      top: 50%;
      width: 2.5938rem;
      height: 1px;
      background: #D6D6DC;
    }
  }

  .banner {
    margin: 0.625rem 0 0;
    border-radius: 0.5rem;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;

    }
  }

  .full-condition {
    color: #AA5732;
    font-weight: 500;
    font-size: 0.8125rem;
    white-space: nowrap;
    margin: 0.6563rem 0;
  }

  .award-button {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translate(-50%, -10%);
    border: none;
    color: #fff;
    min-width: 5rem;
    height: 1.75rem;
    font-size: 0.75rem;
    line-height: 1.75rem;
    background: #F15353;
    border-radius: 1.875rem;
  }

  .face-value {
    position: relative;
    display: inline-block;
    padding: 0.6563rem 0.9688rem;
    background: linear-gradient(153deg, #F6B073 0%, #EB544A 100%);
    border-radius: 0.5rem;
    color: #fff;
    font-size: 1.25rem;
    text-wrap: nowrap;
  }

  .face-value::after {
    content: "";
    position: absolute;
    width: 0.6875rem;
    height: 0.6875rem;
    background: #FDF5EC;
    right: 0;
    top: 50%;
    border-radius: 100px;
    transform: translate(50%, -50%);
  }

  .face-value::before {
    content: "";
    position: absolute;
    width: 0.6875rem;
    height: 0.6875rem;
    background: #FDF5EC;
    left: 0;
    top: 50%;
    border-radius: 100px;
    transform: translate(-50%, -50%);
  }

  .award-bottom-item {
    height: 3.125rem;
    position: relative;
  }

  .r-20 {
    right: 25% !important;
  }

  .award-line {
    position: absolute;
    right: 20%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #EEDCC9;
  }

  .award-bottom-item:last-child {
    padding-right: 0 !important;

  }

  .award-bottom {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #FDF5EC;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    padding: 1.3438rem 2.5938rem 5rem;
    overflow-x: scroll;

    .mr-167 {
      padding-right: 5.2188rem;
    }

    .mr-111 {
      padding-right: 3.4688rem;
    }
  }

  .bold {
    font-weight: bold;
  }

  .mb-40 {
    margin-bottom: 1.25rem;
  }

  .text-left {
    text-align: left;
  }

  .align-items-center {
    display: flex;
    align-items: center;
  }

  .mt-5 {
    margin-top: 0.1563rem;
  }

  .fw-500 {
    font-weight: 500;
  }

  .fz-28 {
    font-size: 0.875rem;
  }

  .fz-26 {
    font-size: 0.8125rem;
  }

  .award-img {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 0.4375rem 0 0;

  }

  .fz-24 {
    font-size: 0.75rem;
  }

  .c-989898 {
    color: #989898;
  }

  .award-btn {
    width: 4.375rem;
    height: 1.75rem;
    background: #F15353;
    border-radius: 1.875rem 1.875rem 1.875rem 1.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #FFFFFF;
    border: none;
  }

  .award-tips {
    position: relative;
    color: #00001C;
    font-size: 0.9375rem;
    font-weight: bold;
    text-align: left;
    margin-bottom: 1.25rem;
  }

  .award-tips-round {
    display: inline-block;
    margin-left: 0.3125rem;
    width: 0.75rem;
    height: 0.75rem;
    background-color: #a9a9a9;
    color: #fff;
    text-align: center;
    line-height: .75rem;
    border-radius: 3.125rem;
    font-size: 0.625rem;
  }

  .award {
    padding: 0.75rem;
    box-sizing: border-box;
    background: #fff;
    border-radius: 0.5rem;
    margin: 0.625rem 0.75rem;
  }

  .between {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .pay-amount {
    margin: 0.875rem 0;
  }
  .no-pay{
    margin-bottom:0.7813rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    padding: 0.5313rem 0.6875rem;
    .icon-a-beizhu2{
      color:#fff;
      font-size: 25px;
    }
    &::after{
      position:absolute;
      content:"";
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color:#fff;
      opacity: 0.16;
      z-index:-1;
    }
    .reset{
      background-color: #fff;
      font-size:0.75rem;
      border-radius: 1.875rem;
      color:var(--themeBaseColor);
      padding:0.4063rem 0.625rem;
    }
    .no-pay-tips{
      width: 15.625rem;
      text-wrap: wrap;
      color: #fff;
      font-size: 0.6875rem;
      text-align: left;
    }

  }

  .orders-tips {
    text-align: center;
    color: #fff;
    margin-top: -0.3125rem;
    margin-bottom: 0.3125rem;
  }

  .order-detail {
    background: #fff;
    border-radius: 0.5rem;
    padding: 1.25rem 0.75rem;
    // margin: -2.4688rem 0.75rem 0;
    font-size: 0.8125rem;
    color: #00001C;
  }

  .round {
    width: 2.75rem;
    height: 2.75rem;
    background: #fff;
    border-radius: 3.125rem;
    margin: 0 auto 0.625rem;
    text-align: center;
    line-height: 2.75rem;
  }
  .icon-dengdai1,.icon-guanbi{
    font-size: 1rem !important;
  }
  .icon-record_go, .icon-dengdai1,.icon-guanbi{
    color: var(--themeBaseColor);
    font-size: 2rem;
  }

  .button-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.4375rem 0.9375rem;
    box-sizing: border-box;
  }

  .btn {
    border: 0.0625rem solid #fff;
    background: var(--themeBaseColor);
    border-radius: 1.875rem;
    font-size: 0.9375rem;
    font-weight: 500;
    width: 8.6875rem;
    height: 2.4375rem;
    color: #fff;
  }
  .head-no{
    height: 16.125rem;
    box-sizing: border-box;
    background: var(--themeBaseColor);
    padding-top: 1rem;
    padding-bottom: 3.7188rem;
  }
  .head {
    background: var(--themeBaseColor);
    padding-top: 1rem;
    padding-bottom: 3.7188rem;
    height: 13.125rem;
    box-sizing: border-box;
  }

  .tips {
    font-size: 1.25rem;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
    margin-top: 0.625rem;
    margin-bottom: 1.2813rem;
  }

  ::v-deep.van-popup {
    background: none;
  }

  .prize-result {
    position: relative;

    .popup-bg {
      width: 100%;
    }

    .result-text {
      position: absolute;
      top: 22px;
      width: 100%;
      height: 70px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 20px;

      .title {
        color: #B0481D;
      }

      .sub-title {
        color: #C85459;
      }
    }

    .confirm-button {
      position: absolute;
      bottom: 30px;
      width: 100%;
      padding: 0 20%;

      ::v-deep.van-button {

        .van-button__content {
          background-color: transparent!important;
          color: #B0481D!important;
          font-size: 14px;
        }
      }
    }
  }

  .close-icon {
    text-align: right;
    font-weight: bold;
  }
}
</style>
